    <!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .fixed-table-footer {
        border-top: 0;
    }

    .purchaseQuantity {
        color: #0078ff;
    }

    .submitQuantity {
        color: #00B83F;
    }

    .soldQuantity {
        color: #aa00bb;
    }

    .onhandDb {
        color: #ff6500;
    }

    .fixed-table-body {
        height: calc(73vh);
    }

    .container-div {
        padding: 0;
    }

</style>
<body class="gray-bg">
<div class="container-div">

    <div id="flexSearchBox" class="collapse out col-sm-12 search-box">
        <form id="user-form">
            <div class="select-list">
                <ul>
                    <li>
                        mainSKU：<input class="reset" type="text" name="mainSKU"/>
                    </li>
                    <li>
                        productName：<input class="reset" type="text" name="productName"/>
                    </li>
                    <li>
                        productCategories：<select name="productClass" th:with="type=${@dict.getType('erp_product_class')}">
                        <option value="">all</option>
                        <option th:each="e : ${type}" th:text="${e['dictLabel']}" th:value="${e['dictValue']}"></option>
                    </select>
                    </li>
                    <li>
                        productType：<select name="productType" th:with="type=${@dict.getType('erp_product_type')}">
                        <option value="">all</option>
                        <option th:each="e : ${type}" th:text="${e['dictLabel']}" th:value="${e['dictValue']}"></option>
                    </select>
                    </li>

                    <li>
                        unionSKU：<input class="reset" type="text" name="unionSKU"/>
                    </li>
                    <li>
                        EAN：<input class="reset" type="text" name="eAN"/>
                    </li>
                    <li class="time">
                        <label>createDate:</label>
                        <input type="text" id="startTime" class="time-input reset" placeholder="beginCreateDate"
                               name="beginCreateDate"/>
                        <span>to</span>
                        <input type="text" id="endTime" class="time-input reset" placeholder="endCreateDate"
                               name="endCreateDate"/>
                    </li>
                    <li shiro:hasPermission="module:products:selcompany">
                        company：<select class="reset_select" id="selCompanyId" name="selCompanyId" >
                        <option th:each="dep : ${depList}" th:text="${dep.deptName}"
                                th:value="${dep.deptId}"></option>
                    </select>
                    </li>
                    <li>
                        <a class="btn btn-success btn-rounded btn-sm" onclick="$.table.search()"><i
                                class="fa fa-search"></i>&nbsp;search</a>
                        <a class="btn btn-primary btn-rounded btn-sm reset-booton"><i
                                class="glyphicon glyphicon-repeat"></i>&nbsp;reset</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>

    <div class="btn-group hidden-xs" id="toolbar" role="group">
        <a class="btn btn-outline btn-success btn-rounded" onclick="$.operate.add()"
           shiro:hasPermission="module:products:add">
            <i class="fa fa-plus"></i> add
        </a>
        <a class="btn btn-outline btn-info btn-rounded" onclick="batchAdd()"
           shiro:hasPermission="module:products:batch_add">
            <i class="fa fa-list"></i> batchUpload
        </a>
        <a class="btn btn-outline btn-warning btn-rounded" onclick="historyList()"
           shiro:hasPermission="module:products:batch_add">
            <i class="glyphicon glyphicon-cloud"></i> uploadHistory
        </a>
        <a class="btn btn-outline btn-success btn-rounded" onclick="showProductName()">
            <i class="glyphicon glyphicon-zoom-in"></i> showFullProductName
        </a>
        <a class="btn btn-outline btn-danger btn-rounded" onclick="$.operate.batRemove()"
           shiro:hasPermission="module:products:remove">
            <i class="fa fa-trash-o"></i> delete
        </a>
        <!-- <a class="btn btn-outline btn-danger btn-rounded" onclick="show_popover()">
             <i class="fa fa-trash-o"></i> 显示全部
         </a>-->
        <a class="btn btn-outline btn-info btn-rounded flex-botton" data-toggle="collapse" data-target="#flexSearchBox">
            <i class="glyphicon glyphicon-chevron-down">unfoldSearch
            </i>
        </a>
    </div>

    <div class="col-sm-12 select-info table-responsive">
        <table id="bootstrap-table" class="table text-nowrap" data-height="770" data-mobile-responsive="true"></table>
    </div>

</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('module:products:edit')}]];
    var edit_inventoryFlag = [[${@permission.hasPermi('module:products:edit_inventory')}]];
    var removeFlag = [[${@permission.hasPermi('module:products:remove')}]];
    var types = [[${@dict.getType('erp_product_class')}]];
    var types1 = [[${@dict.getType('erp_product_type')}]];
    var viewFlag_ean = [[${@permission.hasPermi('module:product:view_ean')}]];

    var prefix = ctx + "module/products";
    $(function () {

            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                batchaddUrl: prefix + "/batch_add",
                historyListUrl: prefix + "/history_list",
                updateInventoryUrl: prefix + "/edit_inventory/{id}",
                removeUrl: prefix + "/remove",
                modalName: "商品以及库存",
                showFooter: true,
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    align: 'center',
                    title: 'id',
                    visible: false
                },
                    {
                        title: 'serialNumber',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
                            var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
                            return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
                        },
                        footerFormatter: function (value) {
                            return 'total';
                        }
                    },
                    {
                        title: 'operation',
                        clickToSelect : false,
                        align: 'center',
                        width: 280,
                        formatter: function (value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>edit</a> ');
                            actions.push('<a class="btn btn-info btn-xs ' + edit_inventoryFlag + '" href="#" onclick="editInventory(\'' + row.id + '\')"><i class="fa fa-edit"></i>adjust</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>delete</a>');
                            return actions.join('');
                        }
                    },

                    {
                        field: 'picUrl',
                        align: 'center',
                        title: 'picture',
                        clickToSelect : false,
                        sortable: true,
                        formatter: function (value, row, index) {
                            return '<div id="image_links">' +
                                '<a href="/profile/product/' + value + '" title="' + row.productName + '" data-gallery="">' +
                                '<img class="img-rounded" width="60px" height="50px" src="/profile/product/' + value + '"></a>' +
                                '</div>';
                        }
                    },
                    {
                        field: 'productName',
                        align: 'left',
                        clickToSelect : false,
                        title: '<span class="globalSearch_column">productName</span>',
                        formatter: function (value, row, index) {
                            if (fal){
                                return '<div class="popover_productname" data-toggle="popover" data-placement="top" data-content="'+value+'">'+value+'</div>';
                            }else {
                                return '<div class="popover_productname" data-toggle="popover" data-placement="top" data-content="'+value+'">'+sub_hidden(value)+'</div>';

                            }}
                    },
                    {
                        field: 'mainSKU',
                        align: 'center',
                        sortable: true,
                        title: '<span class="globalSearch_column">mainSKU</span>'
                    },
                    {
                        field: 'unionSKU',
                        align: 'center',
                        title: '<span class="globalSearch_column">unionSKU</span>'
                    },
                    {
                        field: 'eAN',
                        align: 'center',
                        class:viewFlag_ean,
                        title: '<span class="globalSearch_column">EAN</span>'
                    },
                    {
                        field: 'purchaseQuantity',
                        align: 'center',
                        width: 30,
                        title: 'purchase',
                        class: 'purchaseQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.purchaseQuantity);
                        }
                    },
                    {
                        field: 'submitQuantity',
                        align: 'center',
                        title: 'confirm',
                        class: 'submitQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.submitQuantity);
                        }

                    },
                    {
                        field: 'soldQuantity',
                        align: 'center',
                        title: 'sold',
                        class: 'soldQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.soldQuantity);
                        }
                    },

                    {
                        field: 'refundPutInQuantity',
                        align: 'center',
                        title: 'refundPutInQuantity',
                        class: 'refundPutInQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.refundPutInQuantity);
                        }
                    },
                    {
                        field: 'refundQuantity',
                        align: 'center',
                        title: 'refundQuantity',
                        class: 'refundQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.refundQuantity);
                        }
                    },
                    {
                        field: 'fbsIntoQuantity',
                        align: 'center',
                        title: 'fbsIntoQuantity',
                        class: 'fbsIntoQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.fbsIntoQuantity);
                        }
                    }
                    ,
                    {
                        field: 'onhandDb',
                        title: 'inventory',
                        sortable: true,
                        align: 'center',
                        class: 'onhandDb',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.onhandString);
                        }
                    },
                    {
                        field: 'refundLossQuantity',
                        align: 'center',
                        title: 'salesReturnLoss',
                        class: 'refundLossQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.refundLossQuantity);
                        }
                    },

                    {
                        field: 'fbsRefundPutInQuantity',
                        align: 'center',
                        title: 'fbsReturnPutInQuantity',
                        class: 'fbsRefundPutInQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.fbsRefundPutInQuantity);
                        }
                    },
                    {
                        field: 'fbsRefundLossQuantity',
                        align: 'center',
                        title: 'fbsReturnLossQuantity',
                        class: 'fbsRefundLossQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.fbsRefundLossQuantity);
                        }
                    },
                    {
                        field: 'chinaStorageLossQuantity',
                        align: 'center',
                        title: 'chinaStorageLossQuantity',
                        class: 'chinaStorageLossQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.chinaStorageLossQuantity);
                        }
                    },
                    {
                        field: 'overseasStorageLossQuantity',
                        align: 'center',
                        title: 'overseasStorageLossQuantity',
                        class: 'overseasStorageLossQuantity',
                        footerFormatter: function (value) {
                            return calculateLineTotalAsServer(value, $.table.sumRows.overseasStorageLossQuantity);
                        }
                    },
                    {
                        field: 'productClass',
                        title: 'productClass',
                        sortable: true,
                        align: 'center',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(types, value);
                        }
                    },
                    {
                        field: 'productType',
                        title: 'productType',
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(types1, value);
                        }
                    },
                    {
                        field: 'size',
                        align: 'center',
                        sortable: true,
                        title: 'size'
                    },
                    {
                        field: 'sharePrice',
                        title: 'price',
                        sortable: true,
                        visible: false
                    },
                    {
                        field: 'bz',
                        sortable: true,
                        title: 'remark'
                    }
                    ,
                    {
                        field: 'createBy',
                        align: 'center',
                        sortable: true,
                        title: 'createBy'

                    },
                    {
                        field: 'createDate',
                        align: 'center',
                        sortable: true,
                        title: 'createDate'
                    },
                    {
                        field: 'updateBy',
                        align: 'center',
                        sortable: true,
                        title: 'updateBy'
                    },
                    {
                        field: 'updateDate',
                        align: 'center',
                        sortable: true,
                        title: 'updateDate'
                    },
                    {
                        field: 'companyName',
                        align: 'center',
                        sortable: true,
                        title: 'companyName'
                    }],
                onLoadSuccess: function (item, $element) {
                    $('.fixed-table-footer').addClass("totalRowBackground-color");//合计行添加颜色

                    initialize_image();
                    //初始化提示框方法
                    initialize_popover();

                },
            };
            $.table.init(options);


        }
    );


    /*商品以及库存管理-修改库存*/
    function editInventory (id) {
        var url = $.table._option.updateInventoryUrl.replace("{id}", id);
        $.modal.open("修改库存" + $.table._option.modalName, url);
    }

    /*商品以及库存管理-批量上传*/
    function batchAdd () {
        var url = $.table._option.batchaddUrl;
        $.modal.open("批量上传" + $.table._option.modalName, url);
    }

    /*商品以及库存管理-批量上传历史*/
    function historyList () {
        var url = $.table._option.historyListUrl;
        $.modal.open("批量上传历史" + $.table._option.modalName, url);
    }

    /*显示全部弹出框*/
    function show_popover () {
        $("[data-toggle='popover']").popover('show');
    }
    /*展示所有名称*/
    var fal = false;
    var fal_num = 0;
    function showProductName(){
        if (fal_num % 2 == 0){
            fal = true;
        }else {
            fal = false;
        }
        fal_num++;
        $("#bootstrap-table").bootstrapTable('refresh');
    }

</script>
</body>
</html>